<template>
  <el-card>
    <div class="top-search">
      <!-- <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="采矿权" name="first"> -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <!-- <el-form-item label="公告类型">
            <el-radio-group v-model="formInline.radio2">
              <el-radio-button label="挂牌公告" />
              <el-radio-button label="拍卖公告" />
              <el-radio-button label="补充公告" />
            </el-radio-group>
          </el-form-item> -->
        <el-form-item label="名称">
          <el-input v-model="formInline.user" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="类型">
          <el-input v-model="formInline.user" placeholder="请输入类型" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
        </el-form-item>
      </el-form>
      <!-- </el-tab-pane>
          <el-tab-pane label="探矿权" name="second">Config</el-tab-pane>
        </el-tabs> -->
    </div>
  </el-card>
  <el-card>
    <div class="btn-list">
      <!-- <el-button type="primary" @click="cliAdd">新增</el-button> -->
    </div>
    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" fixed />
      <el-table-column
        prop="date"
        label="名称"
        width="150"
        align="center"
        fixed
      />
      <el-table-column
        prop="name"
        label="类型"
        width="150"
        align="center"
        fixed
      />
      <el-table-column prop="address" label="权限" width="150" align="center" />
      <el-table-column prop="address" label="url" width="150" align="center" />
      <el-table-column prop="address" label="序号" width="150" align="center" />
      <el-table-column prop="address" label="图标" width="150" align="center" />
      <el-table-column label="操作" align="center" width="250">
        <template #default="scope">
          <div class="btn">
            <el-button type="primary" @click="cliSelect">查看</el-button>
            <el-button type="warning">修改</el-button>
            <el-button type="danger" disabled>删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        v-model:current-page="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[100, 200, 300, 400]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
  <!-- 新增 -->
  <el-dialog
    v-model="dialogVisible"
    title="新增发布公告"
    width="50%"
    :before-close="handleClose"
  >
    <div>
      <el-form :model="form" label-width="120px">
        <el-form-item label="矿产品类型">
          <el-select
            v-model="form.value"
            class="m-2"
            placeholder="请选择矿产品类型"
            size="large"
            style="width: 100%"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="公告类型">
          <el-radio-group v-model="form.radio">
            <el-radio-button label="挂牌公告" />
            <el-radio-button label="拍卖公告" />
            <el-radio-button label="补充公告" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="交易机构 ">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="发布时间 ">
          <el-date-picker
            v-model="form.time"
            type="date"
            placeholder="请选择时间"
          />
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确 认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { ElMessageBox } from "element-plus";
import { useRoute, useRouter, RouteLocationMatched } from "vue-router";
import type { TabsPaneContext } from "element-plus";
const router = useRouter();
const activeName = ref("first");
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
// 数据
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
const multipleSelection = ref([]);
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val;
};

// const cliAdd = () => {
//   dialogVisible.value = true;
// };

// 新增模态框
const dialogVisible = ref(false);

const handleClose = (done: () => void) => {
  ElMessageBox.confirm("Are you sure to close this dialog?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};

const form = reactive({
  name: "",
  value: "",
  time: "",
  radio: "挂牌公告",
});
const options = [
  {
    value: "采矿权",
    label: "采矿权",
  },
  {
    value: "探矿权",
    label: "探矿权",
  },
];

// 分页
const currentPage4 = ref(4);
const pageSize4 = ref(100);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
const formInline = reactive({
  radio1: "采矿权",
  radio2: "挂牌公告",
  user: "",
  region: "",
});

const onSubmit = () => {
  console.log("submit!");
};

const cliSelect = () => {
  router.push("/announcement/managementDetail");
  // /announcement/management
};
</script>

<style lang="scss" scoped>
.el-card {
  margin: 15px;
}
.top-search {
  display: flex;
}
.btn-list {
  display: flex;
  margin: 10px 0;
}
.pagination {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  .el-button {
    margin-right: 5px;
  }
  // justify-content: space-around;
}
.demo-tabs {
  width: 100%;
}
</style>
